import React from 'react'
import {Card, Col, Drawer, Tree} from "antd";
import {FormattedMessage} from "../../utils/locale";
import MyDeviceTypeSelect from "../../components/MyDeviceTypeSelect";

const {TreeNode} = Tree;

class DeviceList extends React.Component {
  getDeviceTree = data => {
    return data.map(val => (
      <TreeNode title={val} key={val}/>
    ))
  };


  render() {
    const {deviceIdList, checkedKeys, onCheck, onVisible, visible} = this.props;
      // console.log(deviceIdList,checkedKeys)
    return (
      <Drawer
        title={<div>
          <FormattedMessage
            id="app.map.device-list"
          />
          <MyDeviceTypeSelect/>
        </div>
        }
        mask={false}
        placement="left"
        width={300}
        closable={true}
        onClose={onVisible}
        visible={visible}
      >
        <Tree
          checkable
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          defaultExpandAll={true}
        >
          <TreeNode title='全选' key={1}>
            {this.getDeviceTree(deviceIdList)}
            {/*  <TreeNode title={100} key={100}/>*/}
          </TreeNode>
        </Tree>
      </Drawer>
    )
  }
}


export default DeviceList;
